<template>
  <div class="home">
    <div ref="echarts" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { reqGetMockDataset } from "@/api/index";
export default {
  name: "HomeView",
  data() {
    return {
      myChart: null, // echarts对象
      chartData: [],
    };
  },
  mounted() {
    this.getMockData();
  },
  methods: {
    //mock请求数据
    async getMockData() {
      const { data } = await reqGetMockDataset();
      this.chartData = data;
      console.log(data);
      this.init();
    },

    init() {
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "2015", "2016", "2017"],
          // 提供一份数据。
          source: this.chartData,
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: "category" },
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      this.myChart = echarts.init(this.$refs.echarts); // 初始echarts
      this.myChart && this.myChart.setOption(option);
    },
  },
};

// let p = new Promise((resolve, reject) => {
//   let flag = Math.random() > 0.5 ? true : false;
//   if (flag) {
//     console.log("使用resolve将promise状态从pending变为resolved");
//     resolve("success");
//   } else {
//     console.log("使用reject将promise状态从pending变为rejected");
//     reject("fail");
//   }
// });

// // @1
// p.then(
//   (result) => {
//     console.log("接受resolved的结果");
//     console.log(result);
//   },
//   (err) => {
//     console.log("捕获错误的结果");
//     console.log(err);
//   }
// );
</script>
